.add-btn {
    margin-bottom: 15px;
}

.update-btn {
    width: 30px;
    height: 12px;
    margin-left: 8px;
}

.delete-btn {
    width: 30px;
    height: 12px;
    margin-left: 8px;
}

.data-table {
    /*此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。*/
    display: table;
    /*border-collapse:collapse;*/
    border-collapse: separate;
    /* border: 1px solid #ccc; */
}

.table-caption {
    /*此元素会作为一个表格标题显示（类似 <caption>）*/
    display: table-caption;
    margin: 0;
    font-size: 16px;
}

.table-header-group {
    /*此元素会作为一个或多个行的分组来显示（类似 <thead>）。*/
    display: table-header-group;
    background: #eee;
    font-weight: bold;
}

.table-row-group {
    /*此元素会作为一个或多个行的分组来显示（类似 <tbody>）。*/
    display: table-row-group;
}

.table-footer-group {
    /*此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。*/
    display: table-footer-group;
}

ul {
    list-style: none;
}

.table-row {
    /*此元素会作为一个表格行显示（类似 <tr>）。*/
    display: table-row;
}

.table-cell {
    /*此元素会作为一个表格单元格显示（类似 <td> 和 <th>）*/
    display: table-cell;
    padding: 10px 5px;
    border: 1px solid #ccc;
}

.table-row-group .table-row:hover,
.table-footer-group .table-row:hover {
    background: #f6f6f6;
    color: green;
    font-weight: bold;
}

.table-column-group {
    /*此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。*/
    display: table-column-group;
}

.table-column {
    /*此元素会作为一个单元格列显示（类似 <col>）*/
    display: table-column;
    width: 100px;
}